import { CdkDrag, CdkDropList, CdkDropListGroup } from '@angular/cdk/drag-drop';
import { NgClass, NgIf, NgStyle } from '@angular/common';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

import { DraggableDirective } from '@app/shared/directives/draggable.directive';
import { DroppableDirective } from '@app/shared/directives/droppable.directive';
import { ResizableModule } from 'angular-resizable-element';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzIconDirective } from 'ng-zorro-antd/icon';
import { NzTabsModule } from 'ng-zorro-antd/tabs';

import { LineTextWidgetComponent } from '../line-text-widget/line-text-widget.component';
import { TableWidgetComponent } from '../table-widget/table-widget.component';
import { WidgetConfig } from '../widget-default-setting';
import { TextWidgetComponent } from '../text-widget/text-widget.component';

@Component({
  selector: 'app-dashboard-widget',
  standalone: true,
  imports: [
    DraggableDirective,
    NzTabsModule,
    NzIconDirective,
    NgIf,
    NzGridModule,
    DroppableDirective,
    CdkDropListGroup,
    CdkDropList,
    CdkDrag,
    NgStyle,
    NgClass,
    ResizableModule,
    LineTextWidgetComponent,
    TableWidgetComponent,
    TextWidgetComponent
  ],
  templateUrl: './dashboard-widget.component.html',
  styleUrl: './dashboard-widget.component.less',
  styles: [
    `
      mwlResizable {
        box-sizing: border-box; // required for the enableGhostResize option to work
      }
    `
  ]
})
export class DashboardWidgetComponent implements OnInit {
  @Input() widget!: WidgetConfig;
  @Output() readonly resizeWidget = new EventEmitter();
  leftPanelWidth: number = 340;
  isResize: boolean = false;

  constructor(private readonly cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    if (this.widget.configuration) {
    }
  }
}
